<template>
    <div class="app-container">
        
        <div class="search-bar" style="display: flex; justify-content: space-between; align-items: center;">
            <el-page-header @back="goBack" style="margin-bottom: 12px">
                <template #content>
                    <span class="text-large font-600 mr-3"> 配置列表 </span>
                </template>
            </el-page-header>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
                    <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <div class="mb-[10px]">
                <el-button type="primary" icon="plus" @click="handleAdd">添加配置</el-button>
            </div>
            <el-table
                v-loading="loading"
                :data="dataList"
                border
                @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" fixed="left" align="center" v-if="isAdmin" />
            <el-table-column label="脚本名称" prop="script" min-width="200" />
            <el-table-column label="配置名称" prop="name" min-width="200" />
            <el-table-column label="配置人" prop="owner" min-width="200" />
            <el-table-column label="创建时间" prop="createdAt" min-width="200">
                <template #default="scope">
                    {{ scope.row.createdAt ? formatDate(scope.row.createdAt) : '--'}}
                </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updatedAt" min-width="200">
                <template #default="scope">
                    {{ scope.row.updatedAt ? formatDate(scope.row.updatedAt) : '--'}}
                </template>
            </el-table-column>
            
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="scope">
                    <div>
                        <el-button type="primary" link size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" link size="mini" @click="handleDeleteOne(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    v-model:current-page="paging.page"
                    v-model:page-size="paging.size"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :size="paging.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
        <ConfigForm ref="configFormRef" @refresh="handleQuery" />
    </div>
</template>


<script setup>
import { formatDate } from "@/utils";
import ConfigForm from './configForm.vue'
import { getUischemaApi } from '@/api/scriptManage/index.api'
import { getListApi, getCountApi, deleteConfigsApi } from '@/api/scriptManage/config.api'
import { useRoute } from "vue-router";
import useToggle from "@/hooks/useToggle";
const [loading, , setLoading] = useToggle();
const route = useRoute();
const queryParams = ref({})

const dataList = ref([])

const paging = ref({
    page: 1,
    size: 10,
    total: 0,
})

const handleQuery = () => {
    getList()
}
const handleResetQuery = () => {
    paging.value.page = 1
    paging.value.size = 10
    handleQuery()
}

const handleSizeChange = (size) => {
    paging.value.size = size
    handleQuery()
}

const handleCurrentChange = (page) => {
    paging.value.page = page
    handleQuery()
}

const configFormRef = ref(null)
const handleAdd = () => {
    configFormRef.value.init(queryParams.value.id, queryParams.value.name)
}

const handleEdit = (row) => {
    configFormRef.value.init(queryParams.value.id, queryParams.value.name, row)
}

const handleDeleteOne = (id) => {
    ElMessageBox.confirm('是否确认删除该脚本?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
        setLoading(true)
        deleteConfigsApi([id], queryParams.value.name).then(() => {
            handleQuery()
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
        }).finally(() => {
            setLoading(false)
        })
    })
}

const getList = async () => {
    setLoading(true)
    const data = await getListApi({
        limit: paging.value.size,
        offset: (paging.value.page - 1) * paging.value.size
    }, queryParams.value.name).finally(() => {
        setLoading(false)
    })

    const count = await getCountApi({
        limit: paging.value.size,
        offset: (paging.value.page - 1) * paging.value.size
    }, queryParams.value.name).finally(() => {
        setLoading(false)
    })
    console.log(data, count)
    dataList.value = data
    paging.value.total = count
}

onMounted(() => {
    // 获取路由参数
    const { query } = route
    const { name, id } = query
    if (name) {
        queryParams.value.name = name
        getList()
    }
    if (id) {
        queryParams.value.id = id
    }
})

const router = useRouter()
const goBack = () => {
    router.push({
        path: `/scriptManage/scriptManageList`,
    })
}

</script>
  
<style scoped lang="scss">
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
